<template>
	<div class="travel">
		<!-- 头部 -->
		<pubHead title="旅游达人"></pubHead>
		<div class="travel-t">
		</div>
		<div class="travel-des">
			<div class="travel-des-t">
				旅游达人介绍
			</div>
			<p class="des-1">专属权益</p>
			<p class="des-2">{{travelInfo.content}}</p>
		</div>
		<div>
			<div class="travel-bottom">
				<div class="travel-bottom-in">
					<div class="bottom-in-img">
						<img :src="travelInfo.ad" lazy-load />
					</div>
					<div class="bottom">
						<p class="bottom-1 twoline">旅游达人优惠券大礼包</p>
						<div class="flex ali-b jus-b">
							<p class="bottom-2">￥{{travelInfo.travel_price}}</p>
							<p class="bottom-3" @click="toBuy">立即购买</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="flex jus-c" style="color: #FFFFFF;font-size: 0.28rem;line-height: 0.8rem">
			客服热线：{{kefuPhone}}
		</div>
	</div>
</template>

<script>
	import Vue from 'vue';
	import { Lazyload } from 'vant';
	
	Vue.use(Lazyload);
	import pubHead from '@/components/head';
	import {TravelIndex,TravelPay,TravelBuy} from '@/request/api.js'
	export default{
		data(){
			return{
				travelInfo:'',
				orderNo:'',
				kefuPhone:sessionStorage.getItem('customer_tel') ? sessionStorage.getItem('customer_tel') :'0791-86391599'
			}
		},
		components:{
			 pubHead
		},
		created(){
			this.getData()
		},
		methods:{
			getData(){
				TravelIndex({
					token:localStorage.getItem('token')
				}).then(res=>{
					if(res.code==1){
						this.travelInfo = res.data
						this.getOrder()
					}
				})
			},
			getOrder(){
				TravelBuy({
					token:localStorage.getItem('token'),
					price:this.travelInfo.travel_price
				}).then(res=>{
					if(res.code==1){
						this.orderNo = res.data.order_no
					}
				})
			},
			toBuy(){
				let that = this
				TravelPay({
					token:localStorage.getItem('token'),
					order_no:that.orderNo
				}).then(res=>{
					if(res.code == 1){
					    that.awakenWXPay(res.data);
					}else{
					    that.$router.replace('/payResult?type=2')
					}
				})
			},
			// 微信支付
			// 调起微信支付弹窗
			awakenWXPay (config) {
			    let that = this;
			    WeixinJSBridge.invoke(
			        'getBrandWCPayRequest', {
			            "appId": config.appId,     //公众号名称，由商户传入
			            "timeStamp": config.timeStamp,         //时间戳，自1970年以来的秒数
			            "nonceStr": config.nonceStr, //随机串
			            "package": config.package,
			            "signType": config.signType,         //微信签名方式：
			            "paySign": config.paySign //微信签名
			        }, 
			        res => {
			            if(res.err_msg == "get_brand_wcpay_request:ok" ) {
			                this.$router.replace('/payResult?type=1')
			            } else if (res.err_msg == "get_brand_wcpay_request:cancel"){
			                this.$router.replace('/payResult?type=2')
			            }
			        }
			    );
			},
		}
		
	}
</script>

<style lang="less">
	.travel{
		background-color: #5AAF33;
		min-height: 100vh;
		.travel-t{
			height: 4.26rem;
			background: url(../../assets/g_banner@2x.png) no-repeat center center;
			background-size: 100%;
		}
		.travel-des{
			position: relative;
			width: 94%;
			margin: 0.5rem auto;
			background-color: #fff;
			border: 0.06rem solid #378B17;
			border-radius: 0.1rem;
			padding: 0.5rem 0.2rem 0.3rem 0.2rem;
			.travel-des-t{
				position: absolute;
				top: -0.4rem;
				left: 1.9rem;
				width: 3.24rem;
				height: 0.77rem;
				background-color: #FEE668;
				border: 0.06rem solid #378B17;
				border-radius: 0.38rem;
				text-align: center;
				line-height: 0.77rem;
				color: #2649B8;
				font-size: 0.36rem;
			}
			.des-1{
				color: #333333;
				font-size: 0.32rem;
			}
			.des-2{
				margin-top: 0.2rem;
				color: #333333;
				font-size: 0.26rem;
				line-height: 170%;
			}
		}
		.travel-bottom{
			width: 94%;
			margin: 0 auto;
			
			.travel-bottom-in{
				border-radius: 0.1rem;
				// height: 5rem;
				background-color: #FFFFFF;
				padding-top: 0.1rem;
				.bottom-in-img{
					padding: 0 0.1rem;
					img{
						width: 6.9rem;
						height: 3.4rem;
						border-radius: 0.1rem;
					}
				}
				.bottom{
					padding: 0.2rem;
					.bottom-1{
						color: #333333;
						font-size: 0.28rem;
					}
					.bottom-2{
						margin-top: 0.2rem;
						color: #EC282E;
						font-size: 0.28rem;
					}
					.bottom-3{
						width: 1.42rem;
						height: 0.52rem;
						border-radius: 0.26rem;
						color: #ffffff;
						background-color: #5AAF33;
						text-align: center;
						line-height: 0.52rem;
					}
				}
			}
		}
	}
</style>
